<script setup lang="ts">
	import type { ICircleItem } from '@/simba/types/circle';

	const props = defineProps<{
		list: ICircleItem[]
	}>()

</script>

<template>
	<view class="sgl-content">
		<view v-for="(item, index) in list" :key="item.id">
			<view class="content-Item">
				<navigator
					:url="'/pages/circle/detail/detail?gId='+ item.id"
					open-type="navigate"
					hover-class="navigator-hover" >
					<view class="detail">
						<up-image :show-loading="true" :src="item.imgUrl" width="80px" height="80px" radius="10rpx"></up-image>
						<view class="detal-top">
							<view class="detail-top-top">
								<span>{{item.name}}</span>
								<up-icon name="arrow-upward" size="24"></up-icon>
							</view>
							<span>{{ item.introduce }}</span>
						</view>
					</view>
				</navigator>
				<up-divider :hairline="true"></up-divider>
				<view class="content-foot">
					<view class="foot-item">
						<up-icon name="plus-people-fill" size="20"></up-icon>
						<span class="item-font">{{item.follow}}</span>
					</view>
					<view class="foot-item">
						<up-icon name="heart-fill" size="20"></up-icon>
						<span sclass="item-font">{{item.recommendation}}</span>
					</view>
					<view class="foot-item">
						<slot name="circleOp" :obj="item"></slot>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<style lang="scss">
.sgl-content{
	width: 100%;
	height: auto;
	// border: 1rpx greenyellow solid;
	display: flex;
	flex-direction: column;
	.content-Item{
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		background-color: #ffffff;
		.detail{
			display: flex; 
			flex-direction: row;
			margin: 10rpx 0 10rpx 10rpx;
		}
		.detail-top{
			display: flex; 
			flex-direction: column
		}
		.detail-top-top{
			display: flex; 
			flex-direction: row; 
			justify-content: space-between;
		}
	}
	.content-foot{
		display: flex;
		flex-direction: row; 
		justify-content: space-between; 
		margin: 0rpx 40rpx 10rpx 40rpx;
		.foot-item{
			display: flex; 
			flex-direction: row; 
			justify-content: center;
			.item-font{
				font-size: 28rpx;
			}
		}
	}
}
</style>
